<template>
  <div class="updated-list">
    <!-- 将标题和标签容器放在同一个flex容器中 -->
     <NavView/>
    <div class="header-container">
      <h2 class="title">更新推荐</h2>
      <div class="date-switcher-container">
        <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
          <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name"></el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 下方对应视图内容 -->
    <div class="tab-content">
      <component :is="componentsMap[activeTab]" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import NavView from '../components/NavView.vue'
import TodayView from './components/TodayView.vue';
import YesterDay from './components/YesterDay.vue';
import SunDay from './components/SunDay.vue'
import SaturDay from './components/SaturDay.vue';
import FriDay from './components/FriDay.vue';
import ThursDay from './components/ThursDay.vue';
import WednesDay from './components/WednesDay.vue';

const componentsMap = {
  TodayView: TodayView,
  YesterDay: YesterDay,
  SunDay: SunDay,
  SaturDay: SaturDay,
  FriDay: FriDay,
  ThursDay: ThursDay,
  WednesDay: WednesDay
};

const tabs = ref([
  { label: '今天', name: 'TodayView' },
  { label: '昨天', name: 'YesterDay' },
  { label: '周日', name: 'SaturDay' },
  { label: '周六', name: 'SunDay' },
  { label: '周五', name: 'FriDay' },
  { label: '周四', name: 'ThursDay' },
  { label: '周三', name: 'WednesDay' },
]);

const activeTab = ref('TodayView'); // 注意这里改为大写开头以匹配组件名

const handleTabClick = (tab) => {
  activeTab.value = tab.props.name;
};
</script>

<style scoped lang="scss">
.updated-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  // padding: 20px;

}

.header-container {
  display: flex;
  align-items: flex-end;
  margin-left: 50px;
  background: #fff;
margin-top: 8px;
  .title {
    margin: 0;
    margin-right: 10px; // 减小标题与标签之间的间距
    padding-bottom: 8px;
    white-space: nowrap; // 防止标题换行
  }
}

.date-switcher-container {
  // 保持原有样式
  :deep(.el-tabs__item) {
    height: 36px;
    line-height: 36px;
    padding: 0 20px;

    border: none !important;
    border-radius: 18px;
    color: #666;
    transition: all 0.3s;

    &.is-active {
      background: #409eff;
      color: white;
      transform: scale(1.05);
    }

    &:hover:not(.is-active) {
      color: #409eff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  }

  :deep(.el-tabs__header) {
    margin: 0;
  }

  :deep(.el-tabs__nav-wrap::after) {
    display: none;
  }
}

.tab-content {
  flex: 1;
  padding: 80px;
  overflow: auto;
     margin-left: -30px;
}
</style>
